<template>
	<div class="wrappp">
		<!-- 中间导航栏列表 -->
		<Top :msg="this.$route.path"></Top>
		<div class="wrap-navlist-box">
			<div class="navlist-box">
				<div class="navlist-title-box">
					<ul class="nav-list">
						<li v-for="(item,index) in list" :key="index">
							<span class="navlist-title"> {{item.name}}:</span>
							<a href="javascript:;" class="navlist-title-conten" :class='array[index]==item2?"prices":""' v-for="(item2,index2) in item.value" :key="index2" @click="navlist(item2,index)">{{item2.name}}</a>
						</li>
					</ul>
				</div>
				<!-- 排序方式 -->
				<div class="rank-box">
					<div class="wrap-rank">
						<span class="navlist-title">排序方式：</span>
						<span class="rank-conten">默认</span>
						<span class="rank-conten">最新</span>
					</div>
					<div class="wrap-rank">
						<span class="navlist-title">月薪：</span>
						<el-select v-model="monthlypay" placeholder="请选择">
							<el-option v-for="item in options" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</div>
					<div class="wrap-rank">
						<span class="navlist-title">工作性质：</span>
						<el-select v-model="job" placeholder="请选择">
							<el-option v-for="item in options2" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
					</div>
				</div>
				<!-- 招聘列表 -->
				<div class="seek-box" v-for="(seekitem,seekindex) in seek" :key="seekindex">
					<div class="wrap-seek">
						<!-- 发布信息 -->
						<div class="issue-left-box">
							<router-link :to="{name:'details'}">
								<div class="issue-title">{{seekitem.issue_title}}</div>
							</router-link>
							<div class="wrap-content">
								<span class="issue-pay">{{seekitem.issue_wage}}</span>
								<span class="issue-content">{{seekitem.issue_content}}</span>
							</div>
						</div>
						<!-- 企业信息 -->
						<div class="issue-right-box">
							<router-link :to="{}">
								<div class="issue-title">{{seekitem.parent_title}}
									<span class="iconfont icon-anquan"></span>
								</div>
							</router-link>
							<div class="wrap-content">
								<span class="issue-content">{{seekitem. parent_content}}</span>
							</div>
						</div>
						<!-- 企业logo -->
						<div class="issue-img-box">
							<img :src="seekitem.parent_img">
						</div>
					</div>
					<!-- 底部 -->
					<div class="seek-bottom">
						<div class="left-seek-bottom">
							<span class="move-box" v-for="(letbottom,ind) in seekitem.issue_claim" :key="ind"> {{letbottom}}</span>
						</div>
						<div class="right-seek-bottom">
							{{seekitem.parent_intro}}
						</div>
					</div>
				</div>
				<div class="recommend-box">
					<span>推荐公司:</span>
					<div class="">
						<a class="recommend-title" href="javascript:;" v-for="(tit,intit) in recommend" :key="intit">{{tit}}</a>
					</div>
				</div>
				<!-- 页码 -->
				<div class="page-box">
					<div class="block">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="100" layout="prev, pager, next, jumper" :total="1000">
						</el-pagination>
					</div>
				</div>
			</div>
			<!-- 右边广告位 -->
			<div class="advertising-box">
				<div class="banner-box" v-for="(banneritem,index3) in banner" :key="index3">
					<img :src="banneritem">
				</div>
			</div>

		</div>
		<Bottom></Bottom>
	</div>
</template>
<script>
import Top from "./top";
import Bottom from "./bottom";
export default {
  components: {
    Bottom,
    Top
  },
  data() {
    return {
      list: [
        {
          parent_id: 1,
          name: "工作地点",
          value: [
            {
              id: 1,
              name: "全国"
            },
            {
              id: 2,
              name: "北京"
            },
            {
              id: 3,
              name: "上海"
            },
            {
              id: 4,
              name: "深圳"
            },
            {
              id: 5,
              name: "广州"
            },
            {
              id: 6,
              name: "杭州"
            },
            {
              id: 7,
              name: "成都"
            },
            {
              id: 8,
              name: "南京"
            },
            {
              id: 9,
              name: "武汉"
            },
            {
              id: 10,
              name: "西安"
            },
            {
              id: 11,
              name: "厦门"
            },
            {
              id: 12,
              name: "长沙"
            },
            {
              id: 13,
              name: "苏州"
            },
            {
              id: 14,
              name: "天津"
            }
          ]
        },
        {
          parent_id: 2,
          name: "工作经验",
          value: [
            {
              id: 1,
              name: "不限"
            },
            {
              id: 2,
              name: "应届毕业生"
            },
            {
              id: 3,
              name: "3年及以下"
            },
            {
              id: 4,
              name: "3-5年"
            },
            {
              id: 5,
              name: "5-10年"
            },
            {
              id: 6,
              name: "10-年以上"
            },
            {
              id: 7,
              name: "不要求"
            }
          ]
        },
        {
          parent_id: 3,
          name: "学历要求",
          value: [
            {
              id: 1,
              name: "不限"
            },
            {
              id: 2,
              name: "大专"
            },
            {
              id: 3,
              name: "本科"
            },
            {
              id: 4,
              name: "硕士"
            },
            {
              id: 5,
              name: "博士"
            },
            {
              id: 6,
              name: "不要求"
            }
          ]
        },
        {
          parent_id: 4,
          name: "融资阶段",
          value: [
            {
              id: 1,
              name: "不限"
            },
            {
              id: 2,
              name: "未融资"
            },
            {
              id: 3,
              name: "天使轮"
            },
            {
              id: 4,
              name: "A轮"
            },
            {
              id: 5,
              name: "B轮"
            },
            {
              id: 6,
              name: "c轮"
            },
            {
              id: 7,
              name: "D轮以上"
            },
            {
              id: 8,
              name: "上市公司"
            },
            {
              id: 9,
              name: "不需要融资"
            }
          ]
        },
        {
          parent_id: 5,
          name: "公司规模",
          value: [
            {
              id: 1,
              name: "不限"
            },
            {
              id: 2,
              name: "少于15人"
            },
            {
              id: 3,
              name: "15-50人"
            },
            {
              id: 4,
              name: "50-150人"
            },
            {
              id: 5,
              name: "150-500人"
            },
            {
              id: 6,
              name: "500-2000人"
            },
            {
              id: 7,
              name: "2000人以上"
            }
          ]
        },
        {
          parent_id: 7,
          name: "行业领域",
          value: [
            {
              id: 1,
              name: "不限"
            },
            {
              id: 2,
              name: "移动互联网"
            },
            {
              id: 3,
              name: "电商"
            },
            {
              id: 4,
              name: "金融"
            },
            {
              id: 5,
              name: "企业服务"
            },
            {
              id: 6,
              name: "教育"
            },
            {
              id: 7,
              name: "文娱|内容"
            },
            {
              id: 8,
              name: "游戏"
            },
            {
              id: 9,
              name: "消费生活"
            },
            {
              id: 10,
              name: "硬件"
            }
          ]
        }
      ],
      array: [],
      banner: ["../static/img/banner1.jpg", "../static/img/banner2.jpg"],
      pickCity: [],
      monthlypay: "",
      job: "",
      options: [
        "不限",
        "2K以下",
        "2K-5K",
        "5K-10K",
        "10K-15K",
        "15K-25K",
        "25K-50K",
        "50K以上"
      ],
      options2: ["不限", "全职", "兼职", "实习"],
      seek: [
        {
          id: 1,
          parent_title: "快手",
          parent_content: "文娱|内容/D轮及以上/2000人以上",
          parent_img: "../static/img/banner1.jpg",
          parent_intro: "空间大,大牛多,待遇好,氛围浓",
          issue_title: "高端前端开发工程师[北京中间-中关村]",
          issue_wage: "20K-36K",
          issue_content: "经验不限/本科",
          issue_claim: ["移动端", "前端开发", "web前端"]
        },
        {
          id: 2,
          parent_title: "拉钩",
          parent_content: "文娱|内容/D轮及以上/2000人以上",
          parent_img: "../static/img/banner2.jpg",
          parent_intro: "空间大,大牛多,待遇好,氛围浓",
          issue_title: "高端前端开发工程师[北京中间-中关村]",
          issue_wage: "20K-36K",
          issue_content: "经验不限/本科",
          issue_claim: ["移动端", "前端开发", "web前端"]
        },
        {
          id: 3,
          parent_title: "华为",
          parent_content: "文娱|内容/D轮及以上/2000人以上",
          parent_img: "../static/img/banner1.jpg",
          parent_intro: "空间大,大牛多,待遇好,氛围浓",
          issue_title: "高端前端开发工程师[北京中间-中关村]",
          issue_wage: "20K-36K",
          issue_content: "经验不限/本科",
          issue_claim: ["移动端", "前端开发", "web前端"]
        },
        {
          id: 4,
          parent_title: "小米",
          parent_content: "文娱|内容/D轮及以上/2000人以上",
          parent_img: "../static/img/banner2.jpg",
          parent_intro: "空间大,大牛多,待遇好,氛围浓",
          issue_title: "高端前端开发工程师[北京中间-中关村]",
          issue_wage: "20K-36K",
          issue_content: "经验不限/本科",
          issue_claim: ["移动端", "前端开发", "web前端"]
        }
      ],
      recommend: ["唯品会", "微盟", "京东", "淘宝", "熊猫", "唯品会", "唯品会"],
      currentPage: 5
    };
  },
  methods: {
    //   导航栏列表
    navlist(val, index) {
      this.$set(this.array, index, val);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  watch: {},
  mounted() {
    // 导航栏列表默认颜色
    for (let i = 0; i < this.list.length; i++) {
      this.array.push(this.list[i].value[0].name);
      //   console.log(this.array);
    }
  }
};
</script>
<style scoped>
/* .wrap {
  background: #fafafa;
} */

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

.wrap-navlist-box {
  max-width: 1200px;
  /* border: 1px solid red; */
  min-height: 30px;
  overflow: hidden;
  margin: 0 auto;
}

.navlist-box {
  /* border: 1px solid yellow; */
  float: left;
  width: 75.8%;
  /* overflow: hidden; */
}

.navlist-title-box {
  width: 100%;
  background: #fafafa;
}

.navlist-title {
  font-weight: 700;
  margin-right: 6px;
}

.nav-list li {
  padding: 10px 20px;
  box-sizing: border-box;
}

.navlist-title-conten {
  color: #555;
  display: inline-block;
  padding: 2px 5px;
  margin: 0px 5px;
}

.navlist-title-conten:hover {
  background-color: #00bfff;
  color: #fff;
}

.prices {
  background-color: #00bfff;
  color: #fff;
}
/* 右边广告位 */

.advertising-box {
  float: right;
  width: 19%;
  /* border: 1px solid blue; */
}

.banner-box {
  width: 100%;
  max-height: 300px;
  margin-bottom: 10px;
}

.banner-box img {
  width: 100%;
  height: 100%;
}
/* 排序 */

.rank-box {
  height: 58px;
  width: 100%;
  background: #fafafa;
  box-sizing: border-box;
  margin-top: 35px;
  display: flex;
  align-items: center;
  padding: 0px 20px;
}

.wrap-rank {
  margin-right: 35px;
}

.rank-conten {
  display: inline-block;
  padding: 2px 8px;
  margin: 0px 1px;
  cursor: pointer;
}

.rank-conten:hover {
  background-color: #00bfff;
  color: #fff;
}

.el-select {
  width: 200px;
}
/* 工作列表 */

.seek-box {
  width: 100%;
  min-height: 120px;
  border: 1px solid #ccc;
  margin-top: 25px;
}

.issue-left-box {
  width: 50%;
  /* border: 1px solid red; */
  float: left;
}

.issue-right-box {
  width: 40%;
  float: left;
  /* border: 1px solid red; */
}

.issue-img-box {
  width: 9%;
  float: left;
  height: 70px;
  margin-bottom: 10px;
  /* border: 1px solid red; */
}

.issue-img-box img {
  width: 100%;
  height: 100%;
}

.wrap-seek {
  padding: 0px 15px;
  padding-top: 15px;
  box-sizing: border-box;
}

.issue-pay {
  color: red;
  margin-right: 18px;
}

.issue-content {
  color: #555;
}

.wrap-content {
  margin: 8px 0px;
}

.issue-title {
  color: #00b38a;
  font-size: 17px;
}

.seek-bottom {
  clear: both;
  background: #fafafa;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0px 15px;
  box-sizing: border-box;
  height: 50px;
}

.left-seek-bottom {
  width: 49%;
  float: left;
}

.right-seek-bottom {
  width: 49%;
  float: left;
  font-size: 14px;
}

.move-box {
  padding: 2px 8px;
  display: inline-block;
  margin-right: 10px;
  border: 1px solid #ccc;
  font-size: 13px;
}
/* 推荐公司 */

.recommend-box {
  clear: both;
  width: 100%;
  /* border: 1px solid red; */
  margin-top: 40px;
}

.recommend-title {
  display: inline-block;
  color: #00b38a;
  margin-right: 20px;
  margin-top: 15px;
}
/* 分页 */

.page-box {
  /* border: 1px solid red; */
  text-align: center;
  margin-top: 60px;
}
</style>